<!-- <style>
    p {
        color: red;
        font-size: 30px;
    }
</style>

<p>
    hello world
</p> -->

<!-- <style>
    div{
        color: red;
    }
</style>
<div style="color: green">
    hello world
</div> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div>hello world</div>
</body>
</html> -->

<!-- <style>
    p{
        color: red;
    }
    div{
        color: green;
    }
</style>

<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>
<p>哈哈哈</p>

<div>呵呵呵</div>
<div>呵呵呵</div>
<div>呵呵呵</div>
<div>呵呵呵</div> -->

<!-- <style>
    .blue {
        color: blue;
    }
</style>
<div class="blue">哈哈</div>
<div>哈哈</div -->

<!-- <style>
    .box {
        width: 200px;
        height: 150px;
    }

    .red {
        background-color: red;
    }

    .green {
        background-color: green;
    }
</style>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div> -->

<!-- <style>
    #ha {
        color: red;
    }
</style>
<div id="ha">蛤蛤蛤</div> -->

<!-- <style>
    ul a {
        color: yellow;
    }
</style>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li><a href="#">ccc</a></li>
</ul> -->

<!-- <style>
    .cat ul li a{
        color: red;
    }
</style>

<div class="cat">
    <ul>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
        <li><a href="#">小猫</a></li>
    </ul>
</div> -->

<!-- <style>
    .three>input:focus {
        color: red;
    }
</style>
<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div> -->

<!-- <style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
</style>
<div class="font-family">
    <div class="one">
       这是微软雅黑
    </div>
    <div class="two">
       这是宋体
    </div>
</div> -->


<!-- <style>
    .font-weight .one {
        font-weight: 900;
   }
    .font-weight .two {
        font-weight: 100;
   }
</style>
<div class="font-weight">
    <div class="one">
       粗粗粗
    </div>
    <div class="two">
       细细细
    </div>
</div> -->

<style>
    .font-style em {
        font-style: normal;
    }

    .font-style div {
        font-style: italic;
    }
</style>
<div class="font-style">

        放假啦

    <div class="one">
        听说要加班
    </div>
</div>